<template>
  <div class="">
    <div class="main">
		<div class="logo">
			<img src="../../assets/images/login/logo.png" alt="">
		</div>
		<div class="form">
			<div class="input-div">
				<img src="../../assets/images/login/phone.png"/>
				<input type="text" placeholder="请输入账号" v-model="username"/>
			</div>
			<div class="input-div">
				<img src="../../assets/images/login/pwd.png"/>
				<input type="password" placeholder="请输入密码" v-model="psword"/>
			</div>
			<div class="input-div2">
				<router-link to='/register' class="register">立即注册</router-link>
				<div class="forgetPwd">忘记密码</div>
			</div>
			<div class="button" @click='loginHandle' >登录</div>
		</div>
    <!-- <el-button type="text" @click="open" v-model='showInput'>点击打开 Message Box</el-button> -->
		<div class="other">
			<div class="other-title">
				<span class="hr"></span>
				<span class="hrT">其他登录方式</span>
				<span class="hr"></span>
			</div>
			<div class="other-anc">
				<a href=""><img src="" alt=""></a>
				<a href="" class="otherAnc-qq"><img src="" alt=""></a>
				<a href=""><img src="" alt=""></a>
			</div>
		</div>
	</div>
  </div>
</template>
<script>
import qs from 'qs';
import { mapGetters,mapActions } from "vuex"
import { ACTIONSINCREMENT,ACTIONSDECREMENT } from "../../store/actions/action-types.js"
export default{
  name:'Login',
  data(){
    return{
      username:'',
      psword:''
    }
  },
  computed:{
    ...mapGetters(["getStateUserinfo"])
  },
  methods:{
    ...mapActions([ACTIONSINCREMENT]),

    loginHandle () {
      console.log(1111);
        this.$axios.post(this.HOST+'/burning/login',qs.stringify({
        uname:this.username,
        psword:this.psword
      }))
      .then(res => {
        if(res.data.msg == 'error'){
          //登陆失败
          alert('失败')
        }else{
          //成功

          console.log(res.data)

          this.ACTIONSINCREMENT(this.username)

          this.$router.push({path:'/'})
        }
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.main{
	background-color:#181818;
	min-height: 100%;
	height: auto;
	overflow: hidden;
	color:rgba(255,255,255,0.75);
}
.main>*{
	margin: 0 auto;
}
.logo{
	width:165/100rem;
	margin-top: 2rem;
	img{
		width:100%;
	}
}
.form{
	width: 500/100rem;
	margin-top: (209-90)/100rem;
	.input-div{
		height: 95/100rem;
		border-bottom: 1/100rem solid rgba(255,255,255,1);
		position: relative;
		img{
			height: 53/100rem;
			position: absolute;
			bottom: 13/100rem;
			left:10/100rem;
		}
		input,.show-msg{
      position: absolute;
			bottom:15/100rem;
			left:90/100rem;
			display: inline-block;
			// margin-top:5/100rem;
			// margin-left: 80/100rem;
			// height:85/100rem;
			// line-height:85/100rem;
			width: 420/100rem;
			border:hidden;
			font-size: 30/100rem;
			background-color: #181818;
			color:#fff;
			outline:none;
			letter-spacing: 3/100rem;
		}
		.show-msg{
			color:red;
		}
		input::placeholder{
			color:rgba(255,255,255,0.75);
			font-size: 30/100rem;
		}
	}
	.input-div2{
		height: 94/100rem;
		line-height: 94/100rem;
		font-size: 26/100rem;
		width: 100%;
		letter-spacing: 3/100rem;
		.register{
			float: left;
      color:rgba(255, 255, 255, 0.75);
		}
		.forgetPwd{
			float: right;
		}
	}

	.button{
		width: 5rem;
		height: 90/100rem;
		line-height: 90/100rem;
		border-radius: 45/100rem;
		text-align: center;
		color:#161a16;
		background-color: #fed906;
		font-size: 0.36rem;
		margin:(132-94)/100rem auto 0;
	}
}
.other{
	width: 5rem;
	margin-top: 161/100rem;
	.other-title{
		overflow: hidden;
		height: 30/100rem;
		font-size: 0.25rem;
		line-height: 0.3rem;
		span{
			float: left;
		}
		.hr{
			width: 150/100rem;
			height: 3/100rem;
			background-color: #fff;
			margin-top: 14/100rem
		}
		.hrT{
			height: 25/100rem;
			width: 2rem;
			text-align: center;
		}
	}
	.other-anc{
		margin-top: 0.35rem;
		width: 100%;
		overflow: hidden;
		a{
			width: 80/100rem;
			height: 80/100rem;
			border-radius: 50%;
			float: left;
			img{
				width: 80/100rem;
			}
		}
		.otherAnc-qq{
				margin-left: 1.3rem;
				margin-right: 1.3rem;
		}
	}
}
</style>
